【CSS】transition-duration - トランジションの時間

【CSS】transition-duration - トランジションの時間

CSSのtransition-durationプロパティについて解説します。

検証環境

transition-duration

transition-durationは“トランジションの時間”のプロパティです。

基本構文

transition-duration: 値;

複数値はカンマ(,)で区切ります。

transition-duration: 値1, 値2, 値3;

サンプル

<style>
input {
background: red;
position: relative;
left: 0;
transition-property: background, left;
transition-duration: 2.0s, 4.0s;
}
input:focus {
background: blue;
left: 200px;
}
</style>
<input type="text">